<template>
    <div id="main">
        <el-row>
            <el-col :span="14">
                <el-card style="height: 85vh;">
                    <div slot="header" class="clearfix">
                        <span>学校通知</span>
                    </div>
                    <div>
                        <el-carousel height="85vh">
                            <el-carousel-item class="infinite-list" v-infinite-scroll="load" style="overflow:auto"
                                v-for="(v, i) in notify_list" :key="i">
                                <div v-html="v.content">
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="10">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>缴费事项(点击查看详情)</span>
                    </div>
                    <div style="height: 24vh;">
                        <ol class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                            <li class="order-li" @click="orderVClick(v)" v-for="(v, i) in order_list" :key="i"
                                style="border-bottom: 1px lightblue solid;">
                                {{ v.paymentName }} -- &yen;{{ v.amount }} -- <dict-tag style="display: inline-block;"
                                    :options="dict.type.order_status" :value="v.payStatus" />
                            </li>
                        </ol>
                    </div>
                </el-card>
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>我的信息</span>
                    </div>
                    <el-form>
                        <el-form-item label="学号">
                            {{ own_info.xh }}
                        </el-form-item>
                        <el-form-item label="姓名">
                            {{ own_info.xsxm }}
                        </el-form-item>
                        <el-form-item label="学院">
                            {{ own_info.xy }}
                        </el-form-item>
                        <el-form-item label="专业">
                            {{ own_info.zy }}
                        </el-form-item>
                        <el-form-item label="班级">
                            {{ own_info.bj }}
                        </el-form-item>
                    </el-form>

                </el-card>
            </el-col>
        </el-row>

        <el-dialog title="缴费事项" :visible.sync="orderV" width="600px" append-to-body>
            <el-form label-width="150px">
                <el-form-item label="收款码">
                    <image-preview :src="order.paymentCode" :width="50" :height="50" />
                </el-form-item>
                <el-form-item label="状态">
                    <dict-tag :options="dict.type.order_status" :value="order.payStatus" />
                </el-form-item>
                <el-form-item label="成功支付的交易号">
                    <el-input :disabled="order.payStatus == '2'" type="text" v-model="order.transNo" placeholder="请填写成功支付的交易号"/>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="submitOrder" :disabled="order.payStatus == '2'">提交</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>

    </div>
</template>
<script>

import { listNotify } from "@/api/stureg/notify";
import { getOwnInfo } from "@/api/stureg/reg";
import { listOwnOrder ,updateOrder } from "@/api/stureg/order";


export default {
    name: "index-reg",
    dicts: ['order_status'],
    data() {
        return {
            notify_list: [],
            own_info: {},
            order_list: [],
            orderV: false,
            order: {}
        }
    },
    created() {
        this.listNotify();
        this.getOwnInfo();
        this.listOwnOrder();
    },
    methods: {

        async submitOrder(){
            let sdata = {...this.order};
            sdata.payStatus = 2;
            let res = await updateOrder(sdata);
            if(res.code == 200){
                this.$message.success(res.msg);
                this.orderV = false;
                this.listOwnOrder();
            }
        },

        orderVClick(v) {
            this.order = v;
            console.log(v);
            this.orderV = true;
        },
        load() {

        },
        async listOwnOrder() {
            let res = await listOwnOrder();
            this.order_list = [...res.rows]
        },
        async getOwnInfo() {
            let res = await getOwnInfo();
            this.own_info = { ...res.data };
        },
        async listNotify() {
            let res = await listNotify();
            this.notify_list = [...res.rows];
        }
    }
}
</script>
<style scoped lang="scss">
.order-li :hover {
    cursor: pointer;
}
</style>